<template>
	<view class="container" :data-theme="themeStyle">
		<mescroll-uni ref="mescroll" @getData="getListData">
			<block slot="list">
				<view class="footprint-wrap">
					<block v-if="goodsList.length">
						<ns-goods-item-row :value="goodsList" @toDetail="toDetail"></ns-goods-item-row>
					</block>
					<view v-else class="cart-empty">
						<ns-empty :text="$lang('emptyTpis')"></ns-empty>
					</view>
				</view>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
	import nsGoodsItemRow from '@/components/ns-goods-item/ns-goods-item-row.vue'
	import globalConfig from '@/common/js/golbalConfig.js'
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
	export default {
		components:{
			nsGoodsItemRow,
			nsShowToast
		},
		data() {
			return {
				goodsList: [],
				current: -1
			};
		},
		onLoad() {},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		mixins: [globalConfig],
		methods: {
			getListData(mescroll) {
				this.$api.sendRequest({
					url: '/api/goodsbrowse/page',
					data: {
						page: mescroll.num,
						page_size: mescroll.size
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
						this.goodsList = this.goodsList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			toDetail(e){
				let data={
					sku_id:e.sku_id
				};
				this.$util.redirectTo('/pages/goods/detail/detail', data);
			},
			longpress(index) {
				this.current = index;
			},
			deleteFootprint(index) {
				this.$api.sendRequest({
					url: '/api/goodsbrowse/delete',
					data: {
						id: this.goodsList[index].id
					},
					success: res => {
						if (res.code >= 0) {
							this.goodsList.splice(index, 1);
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			imageError(index) {
				this.goodsList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss">
	/deep/ .fixed{position: relative;top:0}
	.cart-empty{position:relative;top: 50%;margin-top: 154px !important;width:100%}
	/deep/ .empty{margin-top:0 !important}
	.container {
		width: 100vw;
		height: 100vh;
	}

	// .footprint-wrap {
	// 	width: 702rpx;
	// 	margin: 0 auto;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-content: space-between;
	// 	background-color: #f7f7f7;
	// 	padding-bottom: 30rpx;
	// 	margin-top: 20rpx;

	// 	.goods-item {
	// 		width: 49%;
	// 		display: flex;
	// 		flex-direction: column;
	// 		align-items: center;
	// 		margin-bottom: 18rpx;
	// 		background-color: #fff;
	// 		padding: 26rpx 20rpx;
	// 		box-sizing: border-box;
	// 		border-radius: 10rpx;

	// 		image {
	// 			width: 334rpx;
	// 			height: 342rpx;
	// 		}

	// 		.title-box {
	// 			width: 100%;
	// 			height: 90rpx;
	// 			margin-top: 19rpx;

	// 			.goods-title {
	// 				display: -webkit-box;
	// 				-webkit-box-orient: vertical;
	// 				-webkit-line-clamp: 2;
	// 				overflow: hidden;
	// 				font-size: $ns-font-size-base;
	// 				color: #000;
	// 				padding: 0 10rpx;
	// 				box-sizing: border-box;
	// 			}
	// 		}

	// 		.mail {
	// 			width: 100%;
	// 			height: 26rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			margin-top: 13rpx;

	// 			view {
	// 				line-height: 1;
	// 				border: 1px solid #fff;
	// 				font-size: $ns-font-size-x-sm;
	// 				padding: 2rpx 4rpx;
	// 				border-radius: 4rpx;
	// 				margin-right: 11rpx;
	// 			}
	// 		}

	// 		.price-info {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: flex-end;
	// 			width: 100%;
	// 			height: 75rpx;
	// 			line-height: 1;

	// 			.price {
	// 				width: 70%;
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: flex-start;
	// 				justify-content: flex-end;
	// 				overflow: hidden;

	// 				.price-1 {
	// 					font-size: $ns-font-size-base;
	// 					margin-right: 10rpx;
	// 					line-height: 1;
	// 				}

	// 				.price-2 {
	// 					font-size: $ns-font-size-lg;
	// 					color: #313326;
	// 					display: flex;
	// 					align-items: center;
	// 					line-height: 1;

	// 					image {
	// 						width: 62rpx;
	// 						height: 24rpx;
	// 						margin-left: 6rpx;
	// 					}
	// 				}

	// 				.old-num {
	// 					font-size: $ns-font-size-sm;
	// 					color: #777;
	// 					text-decoration: line-through;
	// 				}
	// 			}

	// 			.price-num {
	// 				line-height: 1;
	// 				font-size: $ns-font-size-x-sm;
	// 				color: #777777;
	// 			}
	// 		}
	// 	}
	// }

	.empty {
		margin-top: 100rpx;
	}
</style>
